<template>
  <el-form
    :model="volunForm"
    ref="volunRef"
    :rules="volunRules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="姓名" prop="v_name">
          <el-input v-model="volunForm.v_name" /> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="v_sex">
          <el-radio-group v-model="volunForm.v_sex">
            <el-radio label="男" />
            <el-radio label="女" /> </el-radio-group></el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="出生日期" prop="v_birthday">
          <el-date-picker
            v-model="volunForm.v_birthday"
            type="date"
            placeholder="Pick a date"
            style="width: 100%" /></el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="年龄">
          <span class="age">{{ age }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="政治面貌" prop="v_politic">
          <el-select v-model="volunForm.v_politic" placeholder="请选择">
            <el-option label="党员" value="党员" />
            <el-option label="团员" value="团员" />
            <el-option label="群众" value="群众" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="v_phone">
          <el-input v-model="volunForm.v_phone" /> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="身份证" prop="v_cardId">
          <el-input v-model="volunForm.v_cardId" /> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="职业" prop="v_works">
          <el-input v-model="volunForm.v_works" /> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="微信号" prop="v_wechat">
          <el-input v-model="volunForm.v_wechat" /> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="常用邮箱" prop="v_email">
          <el-input v-model="volunForm.v_email" /> </el-form-item
      ></el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="可上网时长" prop="v_line">
          <el-input v-model="volunForm.v_line" style="width: 100px" />
          <span class="hours">小时</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务时长" prop="v_serve">
          <el-input v-model="volunForm.v_serve" style="width: 100px" />
          <span class="hours">小时</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="爱好" prop="v_hobbies">
      <el-input v-model="volunForm.v_hobbies" />
    </el-form-item>
    <el-form-item label="居住地址" prop="v_addr">
      <el-input v-model="volunForm.v_addr" type="textarea" />
    </el-form-item>
  </el-form>

  <div class="submit">
    <el-button type="danger" @click="submitForm(volunRef)">注册</el-button>
    <el-button type="primary" @click="resetForm(volunRef)">重置</el-button>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, watch } from "vue";
import utils from "@/utils/utils";
import { useVolRegist } from "@/hooks/loginForm/volunRegist";
import { ElMessage, type FormInstance } from "element-plus";
const { proxy }: any = getCurrentInstance();
const { volunRef, volunForm, volunRules } = useVolRegist();
const age = ref(0);

const emit = defineEmits(['on-volun'])

watch(
  () => volunForm.v_birthday,
  (newAge, old) => {
    age.value = utils.fillAge(JSON.stringify(newAge));
  }
);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    proxy.$http.post("/volunteer/add", volunForm).then((res: any) => {
      ElMessage.success('注册成功')
      emit('on-volun')
    });
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="less" scoped>
.el-form {
  .el-row {
    .age {
      border: 1px solid rgba(223, 220, 220, 0.7);
      width: 35px;
      height: 35px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .hours {
      margin-left: 8px;
    }
  }
}
.submit {
  text-align: center;
  margin: 20px;
}
</style>
